"use client";

import { useParams } from "next/navigation";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import VideoPlayer from "@/components/video/VideoPlayer";
import VideoInfo from "@/components/video/VideoInfo";
import Comments from "@/components/video/Comments";
import RelatedVideos from "@/components/video/RelatedVideos";

export default function VideoDetailPage() {
  const params = useParams();
  const videoId = params.id as string;

  // Mock video data - in a real application, this would be fetched from an API
  const videoData = {
    id: videoId || "BV1DwQZYEEwP",
    title: "【美医疗】震惊！美国医疗贵在哪里",
    description: "这个视频详细讲解了美国医疗费用高昂的原因，主要分析了美国医疗系统的运作方式和各种费用来源。",
    uploadDate: "2023-05-15",
    viewCount: "79.4万",
    likeCount: "8.2万",
    coinCount: "3.5万",
    favoriteCount: "2.1万",
    shareCount: "1.4万",
    commentCount: "5263",
    tags: ["医疗", "美国", "科普", "社会"],
    uploaderName: "知识分享",
    uploaderAvatar: "https://ext.same-assets.com/3102283729/3037572124.avif",
    uploaderFollowers: "125.6万",
    isUploader: false,
    videoUrl: "https://ext.same-assets.com/sample-video.mp4",
    thumbnailUrl: "https://ext.same-assets.com/1073491185/2665748921.avif",
  };

  // Mock comments data
  const commentsData = [
    {
      id: "1",
      content: "感谢UP主的详细讲解，终于明白美国医疗为什么这么贵了！",
      user: {
        name: "哔哩哔哩用户",
        avatar: "https://ext.same-assets.com/60824135/142643140.avif",
      },
      likeCount: "8.2k",
      replyCount: "42",
      timestamp: "3天前",
      replies: [],
    },
    {
      id: "2",
      content: "我在美国留学的时候，有一次只是简单看病就花了我1000多美元，太贵了！",
      user: {
        name: "留学生小王",
        avatar: "https://ext.same-assets.com/3915137643/753855895.avif",
      },
      likeCount: "5.3k",
      replyCount: "28",
      timestamp: "2天前",
      replies: [
        {
          id: "21",
          content: "我也有类似的经历，美国的医疗保险也很复杂",
          user: {
            name: "美国通",
            avatar: "https://ext.same-assets.com/565216724/2967821683.avif",
          },
          likeCount: "1.2k",
          timestamp: "1天前",
        }
      ],
    },
    {
      id: "3",
      content: "作为医学生，感觉这个视频把美国医疗系统解释得很清楚了",
      user: {
        name: "医学生小李",
        avatar: "https://ext.same-assets.com/2422794765/3989557222.avif",
      },
      likeCount: "3.2k",
      replyCount: "15",
      timestamp: "1天前",
      replies: [],
    },
  ];

  // Mock related videos
  const relatedVideos = [
    {
      id: "BV1txQwYsETv",
      title: "2025年收入20万在美国是什么水平？",
      thumbnailUrl: "https://ext.same-assets.com/1827414379/2533024759.avif",
      duration: "15:06",
      viewCount: "133.2万",
      publisherName: "美国生活UP主",
    },
    {
      id: "BV1mTSwYSE1J",
      title: "美国医保系统详解：为什么这么复杂？",
      thumbnailUrl: "https://ext.same-assets.com/3979703616/967599304.avif",
      duration: "12:25",
      viewCount: "42.8万",
      publisherName: "留学生活指南",
    },
    {
      id: "BV1eWX5YMEyR",
      title: "中美医疗体系对比：各有优势",
      thumbnailUrl: "https://ext.same-assets.com/1073491185/2665748921.avif",
      duration: "23:51",
      viewCount: "68.1万",
      publisherName: "知识分享",
    },
    {
      id: "BV1QdQ3YRE1T",
      title: "如何在美国看病省钱？这些你一定要知道！",
      thumbnailUrl: "https://ext.same-assets.com/887027569/1596995527.avif",
      duration: "10:42",
      viewCount: "26.7万",
      publisherName: "美国通",
    },
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      <main className="container max-w-screen-xl mx-auto py-4 px-4">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Main content area */}
          <div className="lg:col-span-2">
            {/* Video player */}
            <VideoPlayer videoData={videoData} />

            {/* Video info: title, uploader, stats */}
            <VideoInfo videoData={videoData} />

            {/* Comments section */}
            <Comments comments={commentsData} totalCount={videoData.commentCount} />
          </div>

          {/* Sidebar */}
          <div className="lg:col-span-1">
            <RelatedVideos videos={relatedVideos} />
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}
